<template>
  <div>
    <el-card class="box-card" >
        <div slot="header" class="clearfix">
            <span style="font-weight:bold;font-size:20px;">供应商系统管理</span>
        </div>
        <!--搜索-->
       <el-form :inline="true" :model="formInline" class="demo-form-inline" style="padding-right: -17px;padding: 0px 20px;">
    <el-form-item label="公司名称">
    <el-input v-model="formInline.company" placeholder="公司名称"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button  @click="onSubmit">查询</el-button>
  </el-form-item>
  <el-form-item style="margin-left: 330px;">
    <el-button type="success" @click="onSubmitAddd">添加药品</el-button>
  </el-form-item>
</el-form>  
<!--表格-->
   <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column prop="supplierId" type="selection" width="100" label="主键"></el-table-column>
     <el-table-column prop="supplierId"  width="150" label="主键"></el-table-column>
    <el-table-column prop="company" width="150" label="供应商名称"></el-table-column>
    <el-table-column prop="name"  width="150" label="联系人"></el-table-column>
    <el-table-column prop="phone" width="150" label="联系电话" > </el-table-column>
     <el-table-column prop="email" width="250" label="电子邮件"></el-table-column>
    <el-table-column fixed="right" label="操作"  width="250">
      <template slot-scope="scope">         
        <el-button @click.native="updateSupplier(scope.row.supplierId)" type="text" size="small">
         <i class="el-icon-plus">修改</i>
        </el-button>
            <el-button @click.native="deleteRow(scope.row.name,scope.row.supplierId)" type="text" size="small">
         <i class="el-icon-delete-solid">删除</i>
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--分页-->
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="formInline.currentPage"
       :page-sizes="[2, 5, 10, 20]"
      :page-size="formInline.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
    </el-card>
    <!--弹出修改页面框-->
     <el-dialog title="供应商信息" :visible.sync="update" width="50%"    :close-on-click-modal="false">
      <el-form :model="formInline" status-icon ref="formInline" label-width="100px" class="demo-ruleForm"  >
        <el-form-item label="供应商名称">
    <el-input v-model="formInline.company" placeholder="供应商名称"></el-input>
  </el-form-item>
  
  <el-form-item label="联系人">
   <el-input v-model="formInline.name"  placeholder="联系人"></el-input>
  </el-form-item>
  
    <el-form-item label="联系电话">
    <el-input v-model="formInline.phone" placeholder="联系电话"></el-input>
  </el-form-item>
  
  <el-form-item label="电子邮件">
   <el-input v-model="formInline.email" placeholder="电子邮件"></el-input>
  </el-form-item>
  
  <el-form-item label="地址">
   <el-input v-model="formInline.address" placeholder="地址"></el-input>
  </el-form-item>
  
  <el-form-item>
    <el-button type="primary" @click="onSubmitUpdate">修改供应商</el-button>
  </el-form-item>

      </el-form>
    </el-dialog>
    <!--添加供应商信息-->
    <el-dialog title="供应商信息" :visible.sync="addKapian" width="50%"  >
      <el-form :inline="true" :model="addSupplierFrom" class="demo-form-inline"  :rules="rules"  ref="addSupplierFrom"  >
  <el-form-item label="公司名称"  prop="company" >
    <el-input v-model="addSupplierFrom.company" placeholder="公司名称"></el-input>
  </el-form-item>
  <el-form-item label="联系人" prop="name">
   <el-input v-model="addSupplierFrom.name"  placeholder="联系人"></el-input>
  </el-form-item>
    <el-form-item label="电话号码" prop="phone">
    <el-input v-model="addSupplierFrom.phone" placeholder="电话号码"></el-input>
  </el-form-item>
  <el-form-item label="邮件" prop="email" >
   <el-input   v-model="addSupplierFrom.email" placeholder="邮件"  ></el-input>
  </el-form-item>
    <el-form-item label="地址" prop="address">
   <el-input v-model="addSupplierFrom.address" placeholder="地址"></el-input>
  </el-form-item>
  <br>
  <el-form-item>
    <el-button type="primary" @click="onSubmitAdd">添加药品</el-button>
  </el-form-item>
</el-form>
    </el-dialog>  
  </div>
</template>

<script>
 export default {
    data() {
      return {
        formInline: {
          company: "",
          currentPage:1,
          pageSize:5
        },
        tableData: [

        ],
        total:0,
        update:false,
        addKapian:false,
        addSupplierFrom:{
              company:'',
              name:'',
              phone:'',
              email:'',
              address:''
        },
        rules:{
           company:[
            {  required: true, message: '请输入供应商公司名称', trigger: 'blur' },
            { min: 1, max: 99, message: '长度在 1 到 99 个字符', trigger: 'blur' }
           ],
           name:[
             {  required: true, message: '请输入供应商联系人', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2到 10 个字符', trigger: 'blur' }
           ],
           phone:[
             {  required: true, message: '请输入供应商电话号码', trigger: 'blur' },
                { min: 11, max: 11, message: '电话号码必须是11位', trigger: 'blur' },
           ],
           email:[
             {  required: true, message: '请输入供应商邮件', trigger: 'blur' },
             {type:'email',message:'请输入正确的邮件',trigger:['blur','change']}
           ],
            address:[
            {  required: true, message: '请输入供应商地址', trigger: 'blur' },
            { min: 1, max: 99, message: '长度在 1到 99 个字符', trigger: 'blur' }
          ]
         }
      }
    },
    methods: {
      onSubmit() {
           this.SupplierList();
      },
      //跳转增加药品信息
      onSubmitAddd(){
         this.addKapian=true;
      },
      //删除供应商
      deleteRow(name,supplierId){ 
       this.$confirm('此操作将永久删除'+name+', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {  
          this.$axios.delete("/api/biz/supplier/del/"+supplierId).then(res=>{
            debugger;
            let data=res.data;
                if(data.code==0){
                  this.$message.success(data.msg);
                  this.SupplierList();
                }else{
                  this.$message.success(data.msg);
                }
           });
        })
      },
       //增加药品信息
      onSubmitAdd(){
           //发送请求(药品规格)
            this.$axios.post("/api/biz/supplier/add",this.addSupplierFrom).then(res=>{
                let data=res.data;
                if(data.code==0){
                    this.$message.success(data.msg);
                    this.addKapian=false;
                }else{
                    this.$message.error(data.msg);
                }
           });
      },
      //设置每页多少条
      handleSizeChange(pageSize){
          this.formInline.pageSize=pageSize;
          this.SupplierList();
      },
      //下一页
      handleCurrentChange(currentPage){
         this.formInline.currentPage=currentPage;
          this.SupplierList();
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      SupplierList(){
         //发送请求(药品规格)
            this.$axios.post("/api/biz/supplier/list",this.formInline).then(res=>{
                let data=res.data;
                if(data.code==0){
                    this.tableData=data.data.data;
                    this.total=data.data.totals;
                }else{
                    this.$message.error(data.msg);
                }
           });
      },
       //查询单个药品
      updateSupplier(supplierId){
        this.update=true;
          //发送请求(药品信息)
           this.$axios.get("/api/biz/supplier/selectID/"+supplierId).then(res=>{
                let data=res.data;
                if(data.code==0){
                    this.formInline=data.data;
                }else{
                    this.$message.error(data.error);
                }
           });
      },
      //修改供应商信息
      onSubmitUpdate(){
          //发送请求(药品信息)
           this.$axios.post("/api/biz/supplier/modify",this.formInline).then(res=>{
                let data=res.data;
                if(data.code==0){
                       this.$message.success(data.msg);
                       this.update=false;
                }else{
                        this.$message.success(data.msg);
                }
           });
      }
    },
    //自动加载
     mounted() {
        //发送请求(供应商)
        this.SupplierList();
    },
  }
</script>

<style scoped>

.box-card {
   width: 100%;
     margin: 0; 
}

.el-pagination {
    margin: 30px 0px;
}
.el-table th.el-table__cell>.cell {
    text-align: center;
}
.el-table--enable-row-transition .el-table__body td.el-table__cell {

    text-align: center;
}
 .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
      width: 100%;
    
  }
</style>